﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/Static/NewPages/assets/css/login.css">
    <title>登陆</title>

</head>
<body>
    <div class="content">
        <div class="top">
            <a href="/home">
                <img src="/Static/NewPages/assets/css/images/login/logo-all.png" alt="">
            </a>
        </div>
        <h3>用户登录</h3>
        <div class="user">
            <ul>
                <li class="icon-user" style="float: left;"></li>
                <li class="text">
                    <input type="text" name="" id="loginName" placeholder="请输入你的用户名/邮箱/手机号" />
                </li>
            </ul>
        </div>
        <div class="passward">
            <ul>
                <li class="icon-passward" style="float: left;"></li>
                <li class="text" style="width: 394px; float: left;">
                    <input type="password" name="" id="password" placeholder="请输入您的密码">
                </li>
                <li class="eye" style="float: right;"></li>
            </ul>
        </div>
        <div class="check">
            <ul style="text-align:right;margin-top:10px;">
                <li style="float: left">
                    <input type="checkbox" name="" value="" class="checkbox"><a href="#">自动登陆</a></li>
                <li class="forget">
                    <a href="/FindPassword/Index">忘记密码？</a>
                </li>
            </ul>
        </div>
        <div class="Login">
            <div class="Logins">
                登陆
            </div>
        </div>
        <div class="register">
            <div class="registers">
                还没有账号？免费注册
            </div>
        </div>
        <div class="bottom">
            <p>
                Copyright
     &copy2018-2020&nbsp武汉华志创科技有限公司版权所有<span></span>湖北省武汉市洪山区光谷软件园E3栋403-404
            </p>
        </div>
    </div>
</body>
</html>

<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
    $(function () {
        // 解决 safari 浏览器样式不兼容的问题
        $(".container").css({
            width: $(window).width(),
            height: $(window).height()
        })
    })

</script>
<script type="text/javascript">
    (function () {
        $("#loginName").focus(function () {
            $(this).removeClass("error-info");
        });

        $("#password").focus(function () {
            $(this).removeClass("error-info");
        });

        $("#login-next").on("click", function () {
            $(".checkbox-pic").find("span").toggleClass("checkbox-checked");
        });

        $(".registers").on("click", function () {
            window.location.href = "/Home/Register";
        });

    })();

    // 验证表单，失败返回false
    // 成功返回用户登录obj
    function validateForm() {

        var loginName = $("#loginName").val();
        var password = $("#password").val();

        if (!loginName || !password) { alert("用户名或密码不能为空!"); return false; }

        return {
            userName: loginName,
            password: password
        };
    }

    $(".Logins").on("click", function () {
        var datas = validateForm();
        if (datas) {
            $.post("Login", datas, function (data) {
                // console.log(data);
                if (data.userID > 0) {
                    // 登录成功，跳转到首页
                    window.location.href = "/Home";
                } else {
                    $("#loginName").addClass("error-info");
                    $("#password").addClass("error-info");
                    alert(data.info);
                }
            }, "json");
        }
    });

    $(".eye").on("click", function () {
        var type = $("#password").attr("type") == "password" ? "text" : "password";
        $("#password").attr("type", type);

    });

</script>

<style type="text/css">
    .error-info {
        border-bottom: 1px solid red !important;
    }
</style>
